<template>
	<view class="hstorical-data-gauge"
		:style="{ 'background-color': backColor,'marginTop':marginTop+'px','marginBottom':marginBottom+'px' }">
		<view class="dashboard" :style="{ 'width': width+'px'}">
			<qiun-data-charts type="gauge" :opts="chart.opts" :chartData="chart.data" :canvas2d="true"
				:pixelRatio="100" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "hstoricalDataGauge",
		props: {
			marginTop: {
				type: Number,
				default: 0
			},
			marginBottom: {
				type: Number,
				default: 0
			},
			width: {
				type: Number,
				default: 230
			},
			backColor: {
				type: String,
				default: 'rgba(255, 255, 255, 1)'
			},
			nameColor: {
				type: String,
				default: 'rgba(51, 51, 51, 1)'
			},
			loopColor: {
				type: String,
				default: 'rgba(187, 201, 27, 1)'
			},
			numColor: {
				type: String,
				default: 'rgba(51, 51, 51, 1)'
			},
			templateName: {
				type: String,
				default: "仪表"
			},
			value: {
				type: Object,
				require: true
			}

		},
		data() {
			return {
				chart: {
					opts: {},
					data: {
						categories: [],
						series: [],
					},
					id: '',
				},
			};
		},
		created() {
			this.initChart();
		},
		watch: {
			value: {
				handler(newVal) {
					this.initChart()
				},
				deep: true
			}
		},
		methods: {
			initChart() {
				this.chart = {};
				let data = {};
				let value = this.value.value
				let res = {
					categories: [{
						value: 0.2,
						color: '#c6e2ff'
					}, {
						value: 0.8,
						color: '#b8f1e3'
					}, {
						value: 1,
						color: '#fcd3d3'
					}],
					series: [{
						name: this.templateName,
						// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
						data: this.value.value!==null? (this.value.value - this.value.min) / (this.value.max - this.value.min):0
					}]
				};

				data = JSON.parse(JSON.stringify(res));

				for (let i = 0; i < res.categories.length; i++) {
					if (res.categories[i].value > res.series[0].data) {
						if (i === 0) {
							data.categories.unshift({
								value: data.series[0].data,
								color: this.loopColor
							})
						}
						if (i === 1) {
							data.categories[0] = {
								value: data.series[0].data,
								color: this.loopColor
							}
						}
						if (i === 2) {
							data.categories[1] = {
								value: data.series[0].data,
								color: this.loopColor
							}
							data.categories.splice(0, 1)
						}
						break;
					}
					if (res.categories[i].value = res.series[0].data) {
						if (i === 2) {
							data.categories[2] = {
								value: data.series[0].data,
								color: this.loopColor
							}
							data.categories.splice(0, 2)
						}
					}
				}
				//这里的 opts 是图表类型 type="gauge" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['gauge'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				// #ifdef MP-WEIXIN
				let gaugeWidth = 30;
				let pointerWidth = 30;
				let splitRadius = -40
				// #endif
				// #ifndef MP-WEIXIN
				let gaugeWidth = 10;
				let pointerWidth = 10;
				let splitRadius = -12
				// #endif
				let opts = {
					update: true,
					timing: 'easeOut',
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
						'#FC8452',
						'#9A60B4',
						'#ea7ccc'
					],
					padding: undefined,
					fontSize: 13,
					fontColor: '#666666',
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: 'solid',
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					title: {
						name:  this.value.value!== null? this.value.value + this.value.unit : '--' + this.value.unit,
						fontSize: 24,
						color: this.numColor,
						offsetY: 95,
						offsetX: 0
					},
					subtitle: {
						name: this.templateName,
						fontSize: 12,
						color: this.nameColor,
						offsetY: 100,
						offsetX: 0
					},
					extra: {
						gauge: {
							type: 'default',
							width: gaugeWidth,
							labelColor: '#666666',
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: this.value.min,
							endNumber: this.value.max,
							format: 'dashboardKeepTwoDecimals',
							labelFormat: '',
							splitLine: {
								fixRadius: splitRadius,
								splitNumber: 10,
								width: 8,
								color: '#000000',
								childNumber: 5,
								childWidth: 4
							},
							axisLine: {
								show: true,
								lineStyle: {
									width: gaugeWidth, // 必须与仪表盘宽度一致
									color: data.categories // 引用颜色分段配置
								}
							},
							pointer: {
								width: pointerWidth,
								color: 'auto'
							},
							labelOffset: 16
						}
					}
				};
				this.chart = {
					opts: opts,
					data: data,
					id: 1
				}


				// 延时1秒执行
				setTimeout(x => {
					this.loading = false;
				}, 1000);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.hstorical-data-gauge {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		//padding: 20rpx;
		// border-radius: 20rpx;
		padding-bottom: 20rpx;

		.dashboard {
			height: 100%;
		}
	}
</style>